<template>
  <div>
    <!-- 检索区域 -->
    <el-form v-has="'notice-search'" ref="query" label-width="80px" :inline="true">
      <el-form-item label="标题:">
        <el-input v-model="table.search.Title" class="wid-250"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
      <el-button type="success" @click="toAdd" v-has="'/api/Notice/create'">新增</el-button>

    </el-form>
    <!-- 列表数据 -->
    <DataTable class="mb-5" ref="dataTable" @buttonEvent="buttonEvent" :columns="table.columns" :apiUrl="table.apiUrl" :search="table.search" :buttonGroup="table.buttonGroup" :width="500"></DataTable>
  </div>
</template>

<script>
import DataTable from "@/components/DataTable.vue";
export default {
  components: {
    DataTable
  },
  data() {
    return {
      table: {
        columns: [
          {
            title: "标题",
            key: "title"
          },
          {
            title: "内容",
            key: "content"
          },
          {
            title: "创建时间",
            key: "creationTime"
          }
        ],
        apiUrl: "/api/notice/getList",
        search: {
          Title: ""
        },
        buttonGroup: [
          {
            name: "编辑",
            type: "success",
            icon: "",
            incident: "toEdit"
          },
          {
            name: "查看",
            type: "primary",
            icon: "",
            incident: "toDetail"
          },
          {
            name: "删除",
            type: "danger",
            icon: "",
            incident: "handleDelete",
            code: "/api/Notice/delete"
          }
        ]
      }
    };
  },

  methods: {
    buttonEvent(incident, index, row) {
      this[incident](index, row);
    },

    //检索
    handlerSearch: function() {
      this.$refs.dataTable.initload();
    },

    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据，是否继续?", "提示", {
        type: "warning"
      }).then(() => {
        this.$api.post("/api/Notice/delete", { id: row.id }).then(rsp => {
          if (rsp != false) {
            this.handlerSearch();
          }
        });
      });
    },

    toAdd: function() {
      this.$router.push({
        path: "/notice/add"
      });
    },

    toEdit: function(index, row) {
      this.$router.push({
        path: "/notice/edit",
        query: { data: row }
      });
    },

    toDetail: function(index, row) {
      this.$router.push({
        path: "/notice/detail",
        query: { data: row }
      });
    }
  }
};
</script>

